<template>
  <div class="wallpaper">
    <div
      v-for="ring in rings"
      :key="ring.radius"
      :style="{ left: ring.x + 'vw', top: ring.y + 'vh' }"
      class="ring-wrapper"
    >
      <ring :color="ring.color" :radius="ring.radius" />
    </div>
    <Circle id="wallpaper-circle-1" :color="colors.pop()" :radius="160" />
    <Circle id="wallpaper-circle-2" :color="colors.pop()" :radius="100" />
    <Circle id="wallpaper-circle-3" :color="colors.pop()" :radius="160" />
    <triangle id="wallpaper-triangle-1" :size="143" :color="colors.pop()" />
    <square id="wallpaper-square-1" :color="colors.pop()" :size="93" />
    <hexagon id="wallpaper-hexagon-1" :size="75" :color="colors.pop()" />
  </div>
</template>

<script lang="ts" setup>
import Circle from "./Circle.vue"
import Ring from "./Ring.vue"
import Triangle from "./Triangle.vue"
import Square from "./Square.vue"
import Hexagon from "./Hexagon.vue"
import { computed } from "vue"

function shuffleArray(array: Array<string>) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[array[i], array[j]] = [array[j], array[i]]
  }
  return array
}

const colors = computed(() => {
  return shuffleArray([
    "#7ec8f0",
    "#5fc8ab",
    "#f57e91",
    "#cd84f1",
    "#7d5fff",
    "#ffaf40",
    "#ffb8b8",
    "#d1ccc0",
    "#f3a683",
    "#cf6a87",
    "#1b9cfc",
    "#20bf6b",
    "#ff7f50",
    "#ff6b81",
    "#e056fd",
    "#0fb9b1"
  ])
})

const rings: Array<{
  x: number
  y: number
  radius: number
  color: string
}> = []

for (let i = 0; i < 10; i++) {
  rings.push({
    x: Math.random() * 100,
    y: Math.random() * 100,
    radius: 10 + i,
    color: colors.value.pop()!
  })
}
</script>

<style scoped lang="scss">
@mixin route-shake($shake) {
  0% {
    transform: translate(0) rotate(0deg);
  }
  20% {
    transform: translate(calc(0px - $shake), $shake), rotate(70deg);
  }
  40% {
    transform: translate($shake, calc(0px - $shake)) rotate(140deg);
  }
  60% {
    transform: translate(calc(0px - $shake), calc(0px - $shake)) rotate(210deg);
  }
  80% {
    transform: translate($shake, $shake) rotate(280deg);
  }
  100% {
    transform: translate(0) rotate(360deg);
  }
}

.wallpaper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}

#wallpaper-circle-1 {
  position: absolute;
  left: 70vw;
  top: 10vh;
}

#wallpaper-circle-2 {
  position: absolute;
  left: 20vw;
  top: 5vh;
}

#wallpaper-circle-3 {
  position: absolute;
  top: 60vh;
  left: 12vw;
}

#wallpaper-triangle-1 {
  position: absolute;
  top: 500px;
  left: 500px;
  animation: wallpaper-triangle-1-keyframes 60s linear infinite;
}

@keyframes wallpaper-triangle-1-keyframes {
  @include route-shake(150px);
}

#wallpaper-square-1 {
  position: absolute;
  top: 500px;
  left: 1000px;
  animation: wallpaper-triangle-1-keyframes 47s linear infinite;
}

@keyframes wallpaper-square-1-keyframes {
  @include route-shake(50px);
}

#wallpaper-hexagon-1 {
  position: absolute;
  top: 20vw;
  left: 10vh;
  animation: wallpaper-triangle-1-keyframes 70s linear infinite;
}

@keyframes wallpaper-hexagon-1-keyframes {
  @include route-shake(10px);
}

@keyframes blink {
  0% {
    opacity: 0.2;
    scale: 0.9;
  }
  50% {
    opacity: 1;
    scale: 1.1;
  }
  100% {
    opacity: 0.2;
    scale: 0.9;
  }
}

.ring-wrapper {
  position: absolute;
  animation: blink 2s ease infinite;
}

@keyframes scale {
  0% {
    scale: 1;
    opacity: 1;
  }

  50% {
    scale: 0.3;
    opacity: 0.5;
  }

  100% {
    scale: 1;
    opacity: 1;
  }
}

#wallpaper-circle-1 {
  animation: scale 7s ease infinite;
  animation-delay: 1s;
}
#wallpaper-circle-2 {
  animation: scale 17s ease infinite;
  animation-delay: 2s;
}
#wallpaper-circle-3 {
  animation: scale 23s ease infinite;
}
</style>
